import Vue from "vue";
import Msg from "@/public/message";
// 需求计划表格列自定义组件
const requireColumnCell = Vue.extend({
  template: `<div class="m-girdHeader" :style="{color:nodeData.assigned?'#999':''}" v-if="!this.params.node.rowPinned">
                <div class="cellContent" v-if="this.params.column.colId=='matName'" style="margin-top:10px">
                    <div>{{nodeData.matCode}}</div>
                    <div :title="nodeData.matName">{{nodeData.matName}}</div>
                </div>
                <div class="cellContent" v-else-if="this.params.column.colId=='startSdate'" style="margin-top:10px">
                    <div>{{nodeData.startSdate|formatDate}}</div>
                    <div :title="nodeData.area">{{nodeData.area}}</div>
                </div>
                <div class="cellContent" v-else-if="this.params.column.colId=='requestAmount'" :style="{'margin-top':nodeData.assigned?0:'10px'}">
                    <div>{{nodeData.requestAmount}}</div>
                    <div>{{nodeData.planableQuantity}}</div>
                    <div v-if="nodeData.assigned"><span style="color:#67C23A">●</span>已分配</div>
                </div>
                <div class="cellContent" v-else-if="this.params.column.colId=='purOrdNo'" style="margin-top:10px">
                    <div>{{nodeData.purOrdNo}}/{{nodeData.purOrdMxNo}}</div>
                    <div>{{nodeData.purOrdDate|formatDate}}</div>
                </div>
                <div class="headerContent" v-else-if="this.params.column.colId=='orderAmount'" style="margin-top:10px">
                    <div>{{nodeData.orderAmount}}</div>
                    <div>{{nodeData.wayAmount||0}}</div>
                </div>
                <div class="headerContent" v-else-if="this.params.column.colId=='confirmAmount'" style="margin-top:10px">
                    <div>{{nodeData.confirmAmount||0}}</div>
                    <div>{{nodeData.instockAmount||0}}</div>
                </div>
                <div class="headerContent" v-else-if="this.params.column.colId=='planedAmount'" style="margin-top:10px">
                    <div>{{nodeData.planedAmount||0}}</div>
                    <div>{{nodeData.planAmount}}</div>
                </div>
                <div class="headerContent" v-else-if="this.params.column.colId=='totalPlanAmount'" style="margin-top:10px">
                    <div>{{nodeData.totalPlanAmount}}</div>
                    <div>{{nodeData.planAmount}}</div>
                </div>
    </div>`,
  data() {
    return {
      nodeData: {},
    };
  },
  mounted() {
    this.nodeData = this.params.data;
  },
  filters: {
    formatDate: function(value) {
      return new Date(Date.parse(value)).Format("yyyy-MM-dd");
    },
  },
});
// 需求计划表格头部自定义组件
const requireHeaderCell = Vue.extend({
  template: `<div class="m-girdHeader">
                <div class="headerContent" v-if="headerId=='matName'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>物料描述</div>
                </div>
                <div class="headerContent" v-if="headerId=='startSdate'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>送货区域</div>
                </div>
                <div class="headerContent" v-if="headerId=='requestAmount'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>可计划量</div>
                </div>
                <div class="headerContent" v-if="headerId=='purOrdNo'" style="margin-top:10px">
                    <div>{{this.params.displayName}}/行项目</div>
                    <div>订单日期</div>
                </div>
                <div class="headerContent" v-if="headerId=='orderAmount'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>在途量</div>
                </div>
                <div class="headerContent" v-if="headerId=='confirmAmount'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>入库量</div>
                </div>
                <div class="headerContent" v-if="headerId=='planedAmount'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>计划量</div>
                </div>
                <div class="headerContent" v-if="headerId=='totalPlanAmount'" style="margin-top:10px">
                    <div>{{this.params.displayName}}</div>
                    <div>计划量</div>
                </div>
    </div>`,
  data() {
    return {
      headerId: "",
    };
  },
  mounted() {
    this.headerId = this.params.column.colId;
  },
});
// 表格列自定义组件
const columnCell = Vue.extend({
  template: `<div class="m-girdHeader">
              <div class="cellContent" v-if="this.params.column.colId=='matName'" style="margin-top:10px">
                  <div>{{nodeData.matCode}}</div>
                  <div :title="nodeData.matName">{{nodeData.matName}}</div>
              </div>
              <div class="cellContent" v-else-if="this.params.column.colId=='companyName'" style="margin-top:10px">
                  <div :title="nodeData.companyName">({{nodeData.companyCode}}){{nodeData.companyName}}</div>
                  <div :title="nodeData.supplierName" v-if="planType==0">{{nodeData.supplierName}}</div>
              </div>
              <div class="cellContent" v-else-if="this.params.column.colId=='purOrdNo'">
                  <div>{{nodeData.purOrdNo}}</div>
                  <div v-if="planType==0">{{nodeData.purOrdMxNo}}</div>
                  <div>{{nodeData.orderAmount}}({{nodeData.unitCode}})</div>
                  <div :title="nodeData.area">{{nodeData.area}}</div>
              </div>
              <div class="cellContent" v-else>
                  <div class="planAmoutCell">{{nodeData.planAmount}}</div>
                  <div style="height:22px"  :style="{color:'red'}">{{nodeData.confirmAmount}}</div>
                  <div>
                      <el-button type="text"  class="rendererClass" size="mini" v-if="nodeData.state==0">待发布</el-button>
                      <el-button type="text"  class="rendererClass" size="mini" v-else-if="nodeData.state==1">待确认</el-button>
                      <el-button type="text"  class="rendererClass" size="mini" v-else-if="nodeData.state==2" style="color:red">差异</el-button>
                      <el-button type="text"  class="rendererClass" size="mini" v-else-if="nodeData.state==3" style="color:green">无差异</el-button>
                      <el-button type="text"  class="rendererClass" size="mini" v-else-if="nodeData.state==4" style="color:green">生效</el-button>	
                      <el-button type="text"  class="rendererClass" size="mini" v-else-if="nodeData.state==5">已关闭</el-button>
                      <el-button type="text" @click="checkPlanMeno" class="rendererClass" size="mini" v-if="showDetail">详情</el-button>
                  </div>
              </div>
      </div>`,
  data() {
    return {
      nodeData: {},
      accountType: this.$global.user.userTypeId,
      billState: 0,
      showDetail: false,
      planType: 0,
    };
  },
  mounted() {
    this.billState = this.params.context.componentParent.headerForm.billState;
    this.planType = this.params.context.componentParent.headerForm.type; //0为采购方,1为供方
    this.nodeData = this.params.data;
    if (
      this.params.context.componentParent.editModel == "edit" &&
      this.params.context.componentParent.headerForm.billState > 0
    ) {
      this.showDetail = true;
    }
  },
  methods: {
    // 查看详情
    checkPlanMeno() {
      this.params.context.componentParent.checkPlanMeno(this.params.node.data);
    },
  },
});
// 表格头部组件
const headerCell = Vue.extend({
  template: `<div class="m-girdHeader">
              <div class="headerContent" v-if="headerId=='matName'" style="margin-top:10px">
                  <div>{{this.params.displayName}}</div>
                  <div>物料名称</div>
              </div>
              <div class="headerContent" v-else-if="headerId=='companyName'" style="margin-top:10px">
                  <div>{{this.params.displayName}}</div>
                  <div v-if="planType==0">供应商</div>
              </div>
              <div class="headerContent" v-else-if="headerId=='purOrdNo'">
                  <div>{{this.params.displayName}}</div>
                  <div v-if="planType==0">订单行</div>
                  <div>订单数量(单位)</div>
              </div>
              <div class="headerContent" v-else>
                  <div>{{this.params.displayName}}</div>
                  <div>确认量</div>
                  <div>状态</div>
              </div>
      </div>`,
  data() {
    return {
      headerId: "",
      planType: 0,
    };
  },
  mounted() {
    this.planType = this.params.context.componentParent.headerForm.type; //0为采购方,1为供方
    this.headerId = this.params.column.colId;
  },
});
const numberEditer = Vue.extend({
  template: `<div class="numberCell" style="line-height:22px;">
               <p>{{this.params.data.planedAmount||0}}</p>
               <el-input-number
               class="numberInput"
               v-model="amount"
               :min="0"
               :precision="1"
               @change="handleChange"
               :disabled="!this.params.node.selectable"
               :controls="false"></el-input-number>
    </div>`,
  data() {
    return {
      amount: "",
      planedAmount: 0,
    };
  },
  mounted() {
    this.amount = this.params.data.planAmount;
    this.planedAmount = this.params.data.planedAmount;
  },
  watch: {
    amount(newVal) {
      //   this.params.data.planAmount = newVal;
    },
  },
  methods: {
    handleChange(val) {
      if (val !== "") {
        this.params.data.planedAmount = Number(this.planedAmount) + Number(val);
        this.params.data.planAmount = val;
        //   计算底部栏总数
        this.params.context.componentParent.setPinnedData();
      }
    },
  },
});

const timeEditer = Vue.extend({
  template: `<div class="cellContent numberCell">
            <el-input-number v-model="amount"
                :min="0"
                :precision="1"
                :controls="false"
                @change="handleChange"
                v-if="editModel!=='view'&&billState==0"
                class="numberInput"
                :disabled="billState==2 || mxState==5 || (billState==1 && accountType==1)"
                ></el-input-number>
            <div v-if="billState==3">{{purchasePlanAmount}}</div>
            <div>{{purchasePlanAmount}}</div>
            </div>`,
  data() {
    return {
      editModel: "create",
      deliveryplantms: "",
      amount: "",
      cellIndex: "",
      accountType: this.$global.user.userTypeId,
      billState: 0,
      purchasePlanAmount: "",
      mxState: 0,
    };
  },
  mounted() {
    this.billState =
      this.params.context.componentParent.headerForm.billState || 0;
    this.cellIndex = this.params.colDef.dateIndex;
    this.editModel = this.params.context.componentParent.editModel;
    let data = this.params.data;

    //1.采购方创建                  accountType == 1 billState == 0
    //2.采购方修改自己计划          accountType == 1 billState == 0
    //3.供方创建                   accountType == 4 billState == 0
    //4.供方修改自己计划            accountType == 4 billState == 0
    //5.供方修改采购方计划          accountType == 4 billState == 1
    this.mxState = data.state; //明细关闭不能编辑
    if (this.accountType == 4 && (this.billState == 1 || this.billState == 3)) {
      this.amount = data.deliveryplantms[this.cellIndex].confirmAmount || 0;
      this.purchasePlanAmount =
        data.deliveryplantms[this.cellIndex].planAmount || 0;
    } else {
      this.amount = data.deliveryplantms[this.cellIndex].planAmount || 0;
    }
    // if (this.editModel == "view" || this.editModel == "edit") {
    this.purchasePlanAmount =
      data.deliveryplantms[this.cellIndex].confirmAmount || 0;
    this.amount = data.deliveryplantms[this.cellIndex].planAmount || 0;
    // }
  },
  methods: {
    handleChange(value) {
      value = value || 0;
      let rowIndex = this.params.rowIndex; //行数
      let sum = 0;
      if (this.accountType == 1) {
        this.params.data.deliveryplantms[this.cellIndex].planAmount = value;
        this.params.data.deliveryplantms.forEach((item) => {
          sum += parseFloat(item.planAmount);
        });
        this.params.context.componentParent.rowData[rowIndex].planAmount = sum;
      }

      if (this.accountType == 4) {
        this.params.data.deliveryplantms[this.cellIndex].confirmAmount = value;
        this.params.data.deliveryplantms.forEach((item) => {
          sum += parseFloat(item.confirmAmount);
        });
        this.params.context.componentParent.rowData[
          rowIndex
        ].confirmAmount = sum;
        this.params.context.componentParent.rowData[rowIndex].deliveryplantms[
          this.cellIndex
        ].confirmAmount = value;
        if (this.billState == 0) {
          this.params.context.componentParent.rowData[
            rowIndex
          ].planAmount = sum;
          this.params.context.componentParent.rowData[rowIndex].deliveryplantms[
            this.cellIndex
          ].planAmount = value;
        } else if (this.billState == 1) {
          this.params.data.deliveryplantms[this.cellIndex].planAmount == value
            ? (this.params.context.componentParent.rowData[rowIndex].state = 3)
            : (this.params.context.componentParent.rowData[rowIndex].state = 2);
        }
      }
      this.params.context.componentParent.setPlanAmountCell();
    },
  },
});

// 操作组件
const operator = Vue.extend({
  template: `<span>
          <el-button type="text" @click="delDetails" class="rendererClass" size="mini" v-if="deletable">删除</el-button>
          <el-button type="text" @click="editDifference" class="rendererClass" size="mini" v-if="nodeData.state==2&&accountType==4&&billState==1&&editModel!='view'">差异说明</el-button>	
          <el-button type="text" @click="closePlanDetail" class="rendererClass" size="mini" v-if="nodeData.state==2&&accountType==1&&editModel!='view'">关闭</el-button>
          </span>`,
  data() {
    return {
      nodeData: {},
      accountType: this.$global.user.userTypeId,
      billState: 0,
      editModel: "add",
      // isDifference:false
      deletable: false,
    };
  },
  mounted() {
    this.nodeData = this.params.data;
    this.billState = this.params.context.componentParent.headerForm.billState;
    this.editModel = this.params.context.componentParent.editModel;
    this.billState =
      this.params.context.componentParent.headerForm.billState || 0;
    if (this.billState < 1 && this.editModel != "view") {
      this.deletable = true;
    }
  },
  methods: {
    //  删除明细
    delDetails() {
      this.params.context.componentParent.deletedDeliveryPlanDetail(
        this.params
      );
    },
    // 保存差异说明信息
    editDifference() {
      this.params.context.componentParent.diffrenceContent(
        this.params.node.data
      );
    },
    // 关闭明细行
    closePlanDetail() {
      this.params.context.componentParent.closePlanDetail(
        this.params.node.data
      );
    },
  },
});
// 编辑需求明细组件
const editRequird = Vue.extend({
  template: `<div class="m-editRequird">
              <p>{{requirdAmount}}</p>
              <div @click="handleClick" style="height:26px;" v-if="(accountType==4&&billState>0)||(accountType==1&&billState>1)">
                <el-input v-model="value" v-if="requirdAmount&&!hideInput&&billState<2" @change="valueChange" @blur="blur" ref="input"></el-input>
                <p v-if="hideInput||billState>1" :style="{color:requirdAmount!=value?'red':'#333'}">{{value}}</p>
              </div>
    </div>`,
  data() {
    return {
      nodeData: [],
      requirdAmount: "",
      value: "",
      hideInput: true,
      accountType: this.$global.user.userTypeId,
      billState: 0,
      retFlag: 0,
      state: "",
      editModel: "add",
    };
  },
  mounted() {
    const { data, column } = this.params;
    this.retFlag = this.params.context.componentParent.headerForm;
    this.nodeData = data.deliveryplantms;
    this.state = data.state;
    this.billState =
      this.params.context.componentParent.headerForm.billState || 0;
    this.editModel = this.params.context.componentParent.editModel;
    if (Array.isArray(this.nodeData)) {
      this.nodeData.forEach((item) => {
        // item.confirmAmount = item.confirmAmount || 0;
        if (item.requireDate == column.colId) {
          this.requirdAmount = item.planAmount;
          //   if (data.state == 1) {
          //     this.value = item.planAmount;
          //   } else {
          //     this.value = item.confirmAmount;
          //   }
          this.value = item.confirmAmount;
        }
      });
    }
  },
  methods: {
    //  输入框值改变回调
    valueChange(val) {
      const { data, column } = this.params;
      if (isNaN(val)) {
        Msg.showPopMsg("只能输入数字类型！");
        return;
      }
      if (!val) this.value = 0;
      let total = 0;
      this.nodeData.forEach((item) => {
        if (item.requireDate == column.colId) {
          item.confirmAmount = val;
        }
      });
      //  当确认值变化时计算总确认数量
      this.nodeData.forEach((item) => {
        total += Number(item.confirmAmount);
      });
      data.confirmAmount = total;
      if (val != this.requirdAmount) {
        data.state = 2;
      } else {
        data.state = 3;
      }
      //   计算底部栏总数
      this.params.context.componentParent.setPinnedData();
    },
    // 输入框失去焦点
    blur() {
      this.hideInput = true;
    },
    // 点击显示输入框并使输入框获得焦点
    handleClick() {
      if (this.editModel != "view" && this.state != 5) {
        this.hideInput = false;
        this.$nextTick((_) => {
          if (this.$refs["input"]) {
            this.$refs["input"].focus();
          }
        });
      }
    },
  },
});
export default {
  columnCell,
  headerCell,
  operator,
  editRequird,
  timeEditer,
  requireHeaderCell,
  requireColumnCell,
  numberEditer,
};
